<!-- 手写签名组件
 使用方法：<sxqm  :show.sync="showSxqm"  @success="qmDone"></sxqm>
 -->
<template>
	<view class="zhezhao" @touchmove.stop.prevent="moveHandle"  v-if="show">
		<view class="contents">
			<view class="title">
				<text>手写签名</text>
				<text class="iconfont icon-shanchu-mian closeempty" v-if="closeStatus == true" @click="close"></text>
				<!-- <image class="closeempty" src="../../static/photo_close.png" @click="close"></image> -->
				<!-- <uni-icons type="closeempty" :size="26" ></uni-icons> -->
			</view>
			<canvas class="firstCanvas" canvas-id="firstCanvas" @touchmove="move" @touchstart="start($event)"
				@touchend="end" @touchcancel="cancel" @longtap="tap" disable-scroll="true" @error="error"
				v-if="signImage?false:true"></canvas>
			<image :src="signImage" v-else class="firstCanvas" ></image><!-- style="height: calc(550rpx - 130rpx);" -->
			<view class="caozuo2">
				<view class="chongqian" @tap="clearClick">重签</view>
				<view style="width: 30rpx;"></view>
				<view class="over" @tap="overSign">完成签名</view>
			</view>
		</view>
	</view>
</template>

<script>
	var content = null;
	var touchs = [];
	var canvasw = 0;
	var canvash = 0;
	var _that;
	//获取系统信息
	uni.getSystemInfo({
		success: function(res) {
			canvasw = res.windowWidth;
			canvash = res.windowHeight;
		}
	});
	export default {
		data() {
			return {
				signImage: '',
				isEnd: false, // 是否签名
				fileDownload: this.downloadFile,
			};
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			url: {
				type: String,
				default: '',
			},
			imgtype: {
				type: String,
				default: 'url',
			},
			closeStatus: {
				type: Boolean,
				default: true
			},
		},
		watch: {
			show(val) {
				if (val) {
					//console.log('content===', content);
					content = null;
					content = wx.createCanvasContext('firstCanvas', this);

					// }
				}
			}
		},

		methods: {
			saveSignImage(image)
			{
				this.signImage = image;
			},
			close() {
				this.$emit('update:show', false)
			},
			hiddenView() {
				this.$emit('update:show', false)

			},
			resBase64(){
				var _this = this;
				uni.getFileSystemManager().readFile({ //对图片进行转base64存储
					filePath: _this.signImage, //选择图片返回的相对路径
					encoding: 'base64', //编码格式
					success: ress => { //成功的回调
						//console.log("base64数据：",'data:image/png;base64,'+ress.data)
						var base64Img = 'data:image/png;base64,'+ress.data;
						_this.$emit('success', {
							url:_this.signImage,
							base64Img:base64Img
						})
						_this.close();
					},
					fail() {
						_this.close();
						uni.showToast({
							title: '获取图片数据失败',
							icon: 'none',
						});
						
					}
				})
			},
			overSign: function() {
				let _this = this;
				if(_this.signImage)
				{
					_this.resBase64();
					
					return ;
				}
				//debugger
				if (this.isEnd) {
				_this.$api.loadingMsg('正在生成');
				setTimeout(function(){
					uni.canvasToTempFilePath({
						canvasId: 'firstCanvas',
						fileType:'png',
						success: function(res) {
							uni.hideLoading();
							//debugger
							_this.signImage = res.tempFilePath;
							if(_this.imgtype == 'base64')
							{
								_this.resBase64();
							}else{
								_this.$emit('success', {
									url:_this.signImage,
									base64Img:''
								});
							}
							
							// 签名图片
							// _this.postqm(res.tempFilePath);
						},
						fail: function(res) {
							uni.hideLoading();
							uni.showToast({
								title: '绘制签名失败'+JSON.stringify(res),
								icon: 'none',
							});
						} 
					}, _this)
				},500)
				} else {
					uni.showToast({
						title: '请先完成签名',
						icon: 'none',
					});
				}
			},

			// postqm(path) {
			// 	let _this = this

			// 	_this.$http.uploadFile({
			// 		filePath: path,
			// 		name: 'image',
			// 		showloading: true,
			// 		success: (data) => {
			// 			if (data.success) {
			// 				_this.$emit('success', data.msg);
			// 			}
			// 		},
			// 		fail: (err) => {}
			// 	});
			// },


			// 画布的触摸移动开始手势响应
			start: function(event) {
				// console.log(event)
				// console.log('触摸开始' + event.changedTouches[0].x);
				// console.log('触摸开始' + event.changedTouches[0].y);
				//获取触摸开始的 x,y
				let point = {
					x: event.changedTouches[0].x,
					y: event.changedTouches[0].y
				};
				// console.log(point)
				touchs.push(point);
			},
			// 画布的触摸移动手势响应
			move: function(e) {
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y
				};
				// console.log(point)
				touchs.push(point);
				if (touchs.length >= 2) {
					this.draw(touchs);
				}
			},

			// 画布的触摸移动结束手势响应
			end: function(e) {
				// console.log('触摸结束' + e);
				// 设置为已经签名
				this.isEnd = true;
				// 清空轨迹数组
				for (let i = 0; i < touchs.length; i++) {
					touchs.pop();
				}
			},

			// 画布的触摸取消响应
			cancel: function(e) {
				// console.log('触摸取消' + e);
			},

			// 画布的长按手势响应
			tap: function(e) {
				// console.log('长按手势' + e);
			},

			error: function(e) {
				// console.log('画布触摸错误' + e);
			},

			//绘制
			draw: function(touchs) {
				// console.log(touchs[0], touchs[1]);
				let point1 = touchs[0];
				let point2 = touchs[1];
				touchs.shift();
				content.moveTo(point1.x, point1.y);
				content.lineTo(point2.x, point2.y);
				content.stroke();
				content.draw(true);
			},
			//清除操作
			clearClick: function() {
				// 设置为未签名
				this.isEnd = false;
				this.signImage = '';
				//清除画布
				content.clearRect(0, 0, canvasw, canvash);
				content.draw(true);
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		mounted: function(options) {
			_that = this;
			//debugger
			//获得Canvas的上下文
			content = wx.createCanvasContext('firstCanvas', this);
			//设置线的颜色
			content.setStrokeStyle('#000');
			//设置线的宽度
			content.setLineWidth(5);
			//设置线两端端点样式更加圆润
			content.setLineCap('round');
			//设置两条线连接处更加圆润
			content.setLineJoin('round');
		}
	};
</script>

<style>
	.zhezhao {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		left: 0;
		/* display: flex; */
		justify-content: center;
		align-items: center;
		z-index: 1008;
	}

	.title {
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.closeempty {
		/* width: 50rpx;
		height: 50rpx; */
		font-size: 50rpx;
		margin-top: 4rpx;
		margin-right: 6rpx;
	}

	.contents {
		box-sizing: border-box;
		flex: 1;
		background: #fff;
		padding-bottom: 30rpx;
		width: 690rpx;
		height: 550rpx;
		padding: 20rpx;
		padding-top: 0;
		border: 2rpx solid #fff;
		border-radius: 8rpx;
		margin: 0 auto;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -346rpx;
		margin-top: -307rpx;

		/* border: 2rpx solid #DDDDDD; */
	}

	.firstCanvas {
		background-color: #fff;
		width: 100%;
		height: 300rpx;
		border: 2rpx solid #dddddd;
		box-sizing: border-box;
	}

	#signatureImg {
		background-color: #eeeeee;
	}

	.caozuo2 {
		height: 100rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.caozuo2 view:active {
		background-color: #13ce66;
		color: #fff;
		border: 2rpx solid #13ce66;
	}

	.chongqian {
		background-color: #fff;
		border: 2rpx solid #099279;
		color: #099279;
		box-sizing: border-box;
		flex: 1;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 12rpx;
	}

	.over {
		background-color: #099279;
		color: #fff;
		border: 2rpx solid #099279;
		box-sizing: border-box;
		text-align: center;
		flex: 1;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 12rpx;
	}
</style>
